<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏示例</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <style>
        /* 保持原样的CSS样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .top-nav {
            width: 100%;
            height: 50px;
            background-color: black;
            color: white;
            text-align: left;
            padding: 0;
        }

        .top-nav h1 {
            margin: 8px;
            font-size: 24px;
        }
        .top-nav .close{
            float: right;
            display: block;
            color: white;
        }

        .main-content {
            display: flex;
            flex-grow: 1;
        }

        .sidebar {
            width: 200px;
            background-color: #333;
            display: flex;
            flex-direction: column;
            padding-top: 20px;
        }

        .sidebar button {
            padding: 15px;
            margin: 10px;
            background-color: #444;
            border: none;
            color: white;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }

        .sidebar button:hover {
            background-color: #575757;
        }

        

        .content {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
            position: relative;
        }

        .add-job-btn {
            right: 20px;
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 5px;
            background-color: #4CAF50;
            color: white;
            font-size: 24px;
            border: none;
            cursor: pointer;
            margin-bottom: 20px;
        }

        .job-box {
            border: 1px solid #ccc;
            padding: 20px;
            margin: 20px 0;
            position: relative;
            cursor: pointer;
            display: flex;
            flex-direction: column;
        }

        .job-box:hover {
            background-color: #f9f9f9;
        }

        .job-details {
            display: flex;
            gap: 20px;
            margin-bottom: 10px;
        }

        .job-details p {
            margin: 0;
        }

        .job-buttons {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .job-buttons button {
            margin-left: 10px;
            padding: 5px 10px;
            border: none;
            cursor: pointer;
        }

        .job-buttons .edit-btn {
            background-color: #4CAF50;
            color: white;
        }

        .job-buttons .delete-btn {
            background-color: #f44336;
            color: white;
        }
        .job-buttons .hire-btn {
            background-color: #3498db;
            color: white;
        }
        #pingtu{
            float: left;
        }
    </style>
</head>

<body>

<div class="top-nav">
    <div><h1 id="pingtu">聘途</h1></div>
    <a class="close" href="/登录注册/用户登录.html"><h1>退出登录</h1></a>
</div>
<div class="main-content" id="app">
    <div class="sidebar">
        <button @click="navigateTo('公司端-首页.html')">岗位招聘</button>
        <button @click="message">公司信息</button>
    </div>

    <div  class="content">
        <button class="add-job-btn" @click="addJob">+</button>
        <div class="job-box" v-for="job in jobs" :key="job.pid" >
            <h2>{{ job.pname }}</h2>
            <div class="job-details">
                <p>地点: {{ job.paddress }}</p>
                <p>薪资: {{ job.salary }}</p>
                <p>热度:{{ job.hot }}</p>
                <p>招聘人数:{{ job.enumber }}</p>
                <p>申请人数:{{ job.anumber }}</p>
            </div>
            <div class="job-buttons">
                <button class="hire-btn" @click="hire(job)">招聘员工</button>
                <button class="edit-btn" @click="editJob(job)">更改</button>
                <button class="delete-btn" @click="confirmDelete(job.pid)">删除</button>
            </div>
        </div>
    </div>


</div>
<!--<script src="/vue.min%20(1).js"></script>-->
<!--<script src="/axios.min.js"></script>-->

<!-- 引入 Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入 Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    var CompanyInfo = JSON.parse(sessionStorage.getItem('userData'));
    new Vue({
        el: '#app',
        data: {
            jobs: [],
            cusername:''
        },
        created() {
            //console.log("执行了！！！！！")
            this.mou();
        },
        methods: {
            mou() {
                this.cusername=CompanyInfo.cusername;
                let data1 = new FormData();
                data1.append("cusername", this.cusername);
                axios.post('http://localhost:8080/hqdx/position/ShowPosition',data1)
                    .then(response => {
                        this.jobs = response.data.data.items;
                    })
                    .catch(error => console.error('Error loading job data:', error));
            },
            navigateTo(location) {
                window.location.href = location;
            },
            addJob() {
                window.location.href = '公司端-添加职位.html';
            },
            editJob(job) {
                sessionStorage.setItem('PositionData', JSON.stringify(job));
                window.location.href = `公司端-更新职位.html`;
            },
            hire(job){
                sessionStorage.setItem('PositionData', JSON.stringify(job));
                window.location.href = `公司端-录用.html`;
            },
            confirmDelete(pid) {
                if (confirm('确定要删除这条信息吗？')) {
                    this.deleteJob(pid);
                }
            },
            deleteJob(pid) {
                let data =new FormData();
                data.append("pid",pid);
                axios.post(`http://localhost:8080/hqdx/position/DeletePosition`,data)
                    .then(() => {
                        this.jobs = this.jobs.filter(job => job.id !== pid);
                        alert('职位已从页面中删除');
                        this.mou();
                    })
                    .catch(error => {
                        console.error('Error deleting job:', error);
                        alert('删除职位时出错');
                        this.mou();
                    });
            },
            message(){
                //let item = sessionStorage.getItem('cid');
                //sessionStorage.setItem('cid',item);
                window.location.href = `公司端-公司信息.html`;
            }


        },

    })
</script>
</body>
</html>
